<template>
    <div ref="mapRef" class="map">

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
// @ts-ignore
import china from '@/assets/china2.json';
import { onMounted, ref, toRefs, watch } from 'vue'
const mapRef = ref<HTMLDivElement | null>(null);
// type EChartsOption = echarts.EChartsOption;

interface Iprop {
    data: SaleMap[];
    [index: string]: any;
}

const props = defineProps<Iprop>()

// 注册地图数据 - 地图才有特殊操作
echarts.registerMap('china', china);
let myChart: echarts.ECharts;

function setMapOption(data: any) {
    myChart.setOption(
        ({
            title: {
                text: 'Population Density of Hong Kong （2011）',
                subtext: 'Data from Wikipedia',
                sublink:
                    'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,.7)',
                formatter: '{b}<br/> 销量: {c}'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: { readOnly: false },
                    restore: {},
                    saveAsImage: {}
                }
            },
            visualMap: {
                min: 0,
                max: 1000000,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                    name: '香港18区人口密度',
                    type: 'map',
                    // 这个map属性，要和你当初注册的名字要一样
                    map: 'china',
                    // label: {
                    //     show: true
                    // },
                    data,
                    emphasis: {
                        label: {
                            show: false
                        }
                    }
                }
            ]
        })
    );
}

onMounted(() => {
    if (!mapRef.value) return;
    myChart = echarts.init(mapRef.value);
    // let option: EChartsOption;
    setMapOption([])
})

const { data } = toRefs(props);
watch(data, () => {
    let newData = data.value.map((item: SaleMap) => ({
        name: item.areaName,
        value: item.saleNum
    }))
    setMapOption(newData)
})



</script>

<style scoped lang="less">
.map {
    width: 100%;
    height: 600px;
}
</style>